<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插槽</title>
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div id="app">
  <panel :type="article.type" @say-title="parent" v-for="(article,index) in articles" :key="index">
    <div slot="title"><span v-html="article.title"></span></div>
    <div slot="content">
      <span v-html="article.content"></span>
    </div>
    <div v-if="article.auth" slot="footer">
      {{article.auth}}
    </div>
  </panel>
</div>


<template id="panel">
  <div class="panel" :class="[color]">
    <div class="panel-heading" ref="head">
      <slot name="title"></slot>
    </div>
    <div class="panel-body" >
      <slot name="content"></slot>
    </div>
    <div class="panel-footer">
      <slot name="footer">匿名</slot>
      <button @click="say">点我说标题</button>
    </div>
  </div>
</template>

</body>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script>
  let panel = {
    template:'#panel',
    computed:{
      color(){
        return 'panel-'+ this.type;
      }
    },
    props:{
      type:{
        type:[String],
        default:'default'
      }
    },
    methods: {
      say(){
        this.$emit('say-title',this.$refs.head.textContent)
      }
    }
  };

  let vm = new Vue({
    el: '#app',
    data: {
      articles:[
        {type:'warning',title:'vue',content:'这是vue的文章',auth:'作者1'},
        {type:'primary',title:'react',content:'这是react的文章'},
        {type:'danger',title:'angular',content:'这是angular的文章'}
      ]
    },
    components: {
      panel
    },
    methods:{
      parent(tit){
        alert(tit);
      }
    }
  })

</script>
</html>
